<template>
  <div class="login_box">
    <!-- 登录页 -->
    <img
      src="/static/images/bz@2x.png"
      alt=""
    >
    <button
      class="authBtn"
      type="primary"
      open-type="getUserInfo"
      withCredentials="true"
      lang="zh_CN"
      @getuserinfo="wxGetUserInfo"
    >微信一键登录</button>

    <button
      class="authBtn"
      type="primary"
      open-type="getUserInfo"
      withCredentials="true"
      lang="zh_CN"
      @getuserinfo="LoginUserInfo"
    >手机号登录</button>

    <!-- <div @click="ToSignin">手机号登录</div> -->

    <!-- <button open-type="getPhoneNumber" @bindgetphonenumber="getPhoneNumber">11</button> -->
  </div>
</template>

<script>
export default {
  props: {

  },
  data() {
    return {
      SessionKey: "",
      OpenId: "",
      encryptedData: "",
      iv: "",
      raw_data: "",
      signature: "",
      code: "",
      token: "",
      nickName: null,
      avatarUrl: null,
      isCanUse: wx.getStorageSync("isCanUse") || true, //默认为true
    };
  },
  computed: {

  },
  created() {


  },
  mounted() {

  },
  watch: {

  },
  methods: {
    // // 授权登录
    // bindGetUserInfo() {
    //   var mythis = this
    //   wx.getSetting({
    //     success(res) {
    //       if (res.authSetting["scope.userInfo"]) {
    //         console.log("已经授权，可以直接调用");
    //         wx.getUserInfo({
    //           success: function (res) {
    //             console.log(res);
    //             if (res.userInfo) {
    //               wx.login({
    //                 success(res) {
    //                   if (res.code) {
    //                     mythis.$http
    //                       .post(
    //                         mythis.API.api + "/api/wechat/mp_auth",
    //                         {
    //                           code: res.code
    //                         }
    //                       )
    //                       .then(res => {
    //                         console.log("后台交互返回值:", res);
    //                         if (res.status === 200) {
    //                           wx.showToast({
    //                             title: '登录成功',
    //                             icon: 'loading',
    //                             duration: 1500,
    //                             success: function () {
    //                               // 定时器，未授权1.5秒后跳转授权页面
    //                               setTimeout(function () {
    //                                 wx.switchTab({
    //                                   url: '../index/main'
    //                                 })
    //                               }, 1500);
    //                             }
    //                           })
    //                         }

    //                       });
    //                   } else {
    //                     console.log("登录失败！" + res.errMsg);
    //                   }
    //                 }
    //               });
    //             }
    //           }
    //         });
    //       } else {
    //         console.log("用户点击了取消");
    //       }
    //     }
    //   });
    // },
    // 跳转账密登录
    //第一授权获取用户信息===》按钮触发
    wxGetUserInfo() {
      let _this = this;
      // _this.login();
      wx.getUserInfo({
        provider: "weixin",
        success: function(infoRes) {

          _this.encryptedData = infoRes.encryptedData; //
          _this.iv = infoRes.iv; //
          _this.raw_data = infoRes.rawData; //
          _this.signature = infoRes.signature; //

          wx.setStorage({
            key: 'encryptedData',
            data: _this.encryptedData,
          })
          wx.setStorage({
            key: 'iv',
            data: _this.iv,
          })

          try {
            wx.setStorageSync("isCanUse", false); //记录是否第一次授权  false:表示不是第一次授权
            _this.updateUserInfo();
          } catch (e) {}
          // console.log(encryptedData);
          // console.log(infoRes);
          // console.log('用户昵称为：' + nickName);
          // console.log('用户头像为：' + avatarUrl);
          wx.showLoading({
            title: "登录中...",
          });
        },
        fail(res) {
          console.log('res='+JSON.stringify(res)) 
        },
      });
    }, 
    //登录
    login() {
      let _this = this;
      // 1.wx获取登录用户code
      wx.login({
        provider: "weixin",
        success: function(loginRes) {
          _this.code = loginRes.code;
          if (!_this.isCanUse) {
            //非第一次授权获取用户信息
            wx.getUserInfo({
              provider: "weixin",
              success: function(infoRes) {
                //获取用户信息后向调用信息更新方法
                let nickName = infoRes.userInfo.nickName; //昵称
                let avatarUrl = infoRes.userInfo.avatarUrl; //头像
                // console.log(nickName)
                _this.updateUserInfo(); //调用更新信息方法
              },
            });
          }
          //2.将用户登录code传递到后台置换用户SessionKey、OpenId等信息
          // wx.request({
          //   url: "https://hsh.yuranai.cn/api/wechat/mp_auth",
          //   data: {
          //     code: _this.code
          //   },
          //   method: "POST",
          //   header: {
          //     "content-type": "application/x-www-form-urlencoded",
          //     "XX-applets-AppId": "wx4be1582aa5b3b85f"
          //   },
          //   success: (res) => {
          //     // console.log(res)
          //     //openId、或SessionKdy存储//隐藏loading
          //     wx.hideLoading();
          //     // console.log(res.data.data.openid)
          //     // window.localStorage.setItem('openid',res.data.data.openid);
          //   },
          // });
        },
      });
    },
    //向后台更新信息
    updateUserInfo() {
      let _this = this;
      wx.request({
        url: this.baseUrl + "/api/wechat/mp_auth", //服务器端地址
        data: {
          code: _this.code,
          encryptedData: _this.encryptedData,
          iv: _this.iv,
          raw_data: _this.raw_data,
          signature: _this.signature,
          // appKey: this.$store.state.appKey,
          // customerId: _this.customerId,
          // nickName: _this.nickName,
          // headUrl: _this.avatarUrl,
        },
        method: "POST",
        header: {
          "content-type": "application/x-www-form-urlencoded",
          "XX-applets-AppId": "wx4be1582aa5b3b85f",
          "XX-Device-Type": "wxapplets",
          "XX-Api-Version": "1.0.0",
        },
        success: (res) => {
          // console.log(res)
          wx.setStorage({
            key: 'cache_key',
            data: res.data.data.cache_key,
          })
          wx.setStorage({
            key: 'session_key',
            data: res.data.data.session_key,
          })
          wx.setStorage({
            key: 'openid',
            data: res.data.data.openid,
          })

          // console.log(wx.getStorageSync('token'))
          // console.log(wx.getStorageSync('session_key'))
          // _this.token = wx.getStorageSync('token')
          // console.log(_this.token)
          // _this.token = res.data.data.token //
          // _this.nickName = res.data.data.user.user_nickname; //昵称
          // _this.avatarUrl = res.data.data.user.avatar; //头像
          // console.log(_this.nickName)
          // console.log(_this.avatarUrl)
          if (res.data.status == 200) {
            // wx.reLaunch({
            //   //信息更新成功后跳转到小程序首页
            //   url: "/pages/index/main"
            // });

            this.request({
              url: this.baseUrl + '/api/wechat/UserInfo',
              data:{
                iv: wx.getStorageSync('iv'),
                encryptedData: wx.getStorageSync('encryptedData'),
                session_key: wx.getStorageSync('session_key')
              },
              method: 'GET',
            })
            .then(result=>{
              console.log(result)
              if(result.status == 200){
                // wx.reLaunch({
                //   //跳转到小程序首页
                //   url: "/pages/index/main"
                // });
                // /api/wechatapp/login
                this.request({
                  url: this.baseUrl + '/api/wechatapp/login',
                  data:{
                    login_type: 2,
                    openid: wx.getStorageSync('openid')
                  },
                  method: 'POST',
                }).then(re=>{
                  console.log(re)
                  if(re.status == 200){
                    wx.setStorage({
                      key: 'mobile',
                      data: re.data.user_login.mobile,
                    })
                    wx.reLaunch({
                      //跳转到小程序首页
                      url: "/pages/index/main"
                    });
                    // this.personal_center_content = result.data.personal_center_content; //介绍
                  } else {
                    wx.navigateTo({
                      //跳转到注册
                      url: "/pages/register/main"
                    });
                    // return false
                  }
                })
              } else {
                // wx.navigateTo({
                //   //跳转到注册
                //   url: "/pages/register/main"
                // });
                return false
              }
            })

          }
        },
      });
    },


    LoginUserInfo() {
      let _this = this;
      // _this.login2();
      wx.getUserInfo({
        provider: "weixin",
        success: function(infoRes) {

          _this.encryptedData = infoRes.encryptedData; //
          _this.iv = infoRes.iv; //
          _this.raw_data = infoRes.rawData; //
          _this.signature = infoRes.signature; //

          wx.setStorage({
            key: 'encryptedData',
            data: _this.encryptedData,
          })
          wx.setStorage({
            key: 'iv',
            data: _this.iv,
          })

          try {
            wx.setStorageSync("isCanUse", false); //记录是否第一次授权  false:表示不是第一次授权
            _this.updateUserInfo2();
          } catch (e) {}
          // console.log(encryptedData);
          // console.log(infoRes);
          // console.log('用户昵称为：' + nickName);
          // console.log('用户头像为：' + avatarUrl);
          // wx.showLoading({
          //   title: "登录中...",
          // });
        },
        fail(res) {
          console.log('res='+JSON.stringify(res)) 
        },
      });
    },
    //登录
    login2() {
      let _this = this;
      // 1.wx获取登录用户code
      wx.login({
        provider: "weixin",
        success: function(loginRes) {
          _this.code = loginRes.code;
          if (!_this.isCanUse) {
            //非第一次授权获取用户信息
            wx.getUserInfo({
              provider: "weixin",
              success: function(infoRes) {
                //获取用户信息后向调用信息更新方法
                let nickName = infoRes.userInfo.nickName; //昵称
                let avatarUrl = infoRes.userInfo.avatarUrl; //头像
                // console.log(nickName)
                _this.updateUserInfo2(); //调用更新信息方法
              },
            });
          }
          //2.将用户登录code传递到后台置换用户SessionKey、OpenId等信息
          // wx.request({
          //   url: "https://hsh.yuranai.cn/api/wechat/mp_auth",
          //   data: {
          //     code: _this.code
          //   },
          //   method: "POST",
          //   header: {
          //     "content-type": "application/x-www-form-urlencoded",
          //     "XX-applets-AppId": "wx4be1582aa5b3b85f"
          //   },
          //   success: (res) => {
          //     // console.log(res)
          //     //openId、或SessionKdy存储//隐藏loading
          //     wx.hideLoading();
          //     // console.log(res.data.data.openid)
          //     // window.localStorage.setItem('openid',res.data.data.openid);
          //   },
          // });
        },
      });
    },
    //向后台更新信息
    updateUserInfo2() {
      let _this = this;
      wx.request({
        url: this.baseUrl + "/api/wechat/mp_auth", //服务器端地址
        data: {
          code: _this.code,
          encryptedData: _this.encryptedData,
          iv: _this.iv,
          raw_data: _this.raw_data,
          signature: _this.signature,
          // appKey: this.$store.state.appKey,
          // customerId: _this.customerId,
          // nickName: _this.nickName,
          // headUrl: _this.avatarUrl,
        },
        method: "POST",
        header: {
          "content-type": "application/x-www-form-urlencoded",
          "XX-applets-AppId": "wx4be1582aa5b3b85f",
          "XX-Device-Type": "wxapplets",
          "XX-Api-Version": "1.0.0",
        },
        success: (res) => {
          // console.log(res)
          wx.setStorage({
            key: 'cache_key',
            data: res.data.data.cache_key,
          })
          wx.setStorage({
            key: 'session_key',
            data: res.data.data.session_key,
          })
          wx.setStorage({
            key: 'openid',
            data: res.data.data.openid,
          })

          // console.log(wx.getStorageSync('token'))
          // console.log(wx.getStorageSync('session_key'))
          // _this.token = wx.getStorageSync('token')
          // console.log(_this.token)
          // _this.token = res.data.data.token //
          // _this.nickName = res.data.data.user.user_nickname; //昵称
          // _this.avatarUrl = res.data.data.user.avatar; //头像
          // console.log(_this.nickName)
          // console.log(_this.avatarUrl)
          if (res.data.status == 200) {
            // wx.reLaunch({
            //   //信息更新成功后跳转到小程序首页
            //   url: "/pages/index/main"
            // });

            this.request({
              url: this.baseUrl + '/api/wechat/UserInfo',
              data:{
                iv: wx.getStorageSync('iv'),
                encryptedData: wx.getStorageSync('encryptedData'),
                session_key: wx.getStorageSync('session_key')
              },
              method: 'GET',
            })
            .then(result=>{
              console.log(result)
              if(result.status == 200){
                // wx.reLaunch({
                //   //跳转到小程序首页
                //   url: "/pages/index/main"
                // });
                // /api/wechatapp/login
                this.request({
                  url: this.baseUrl + '/api/wechatapp/login',
                  data:{
                    login_type: 1,
                    openid: wx.getStorageSync('openid')
                  },
                  method: 'POST',
                })
                .then(result=>{
                  console.log(result)
                  if(result.status == 200){
                    wx.setStorage({
                      key: 'userInfo',
                      data: result.data.user_login,
                    })
                    wx.reLaunch({
                      //跳转到小程序首页
                      url: "/pages/register/main"
                    })
                    // this.personal_center_content = result.data.personal_center_content; //介绍
                  } else {
                    wx.navigateTo({
                      //跳转到注册
                      url: "/pages/signin/main"
                    });
                    return false
                  }
                })
                // this.personal_center_content = result.data.personal_center_content; //介绍
              } else {
                // wx.navigateTo({
                //   //跳转到注册
                //   url: "/pages/register/main"
                // });
                return false
              }
            })

          }
        },
      });
    },


    // ToSignin() {
    //   wx.navigateTo({ url: '../signin/main' })
    // },
    // getPhoneNumber(e) {
    //   console.log(e.detail.errMsg)
    //   console.log(e.detail.iv)
    //   console.log(e.detail.encryptedData)
    // }


  },
  onLoad() {
    //默认加载
    this.login();
    this.login2();
  },
  components: {

  },
};
</script>

<style>
page {
  background: #ffffff;
}
.login_box {
  text-align: center;
}
.login_box img {
  width: 244rpx;
  height: 332rpx;
  background: #ffffff;
  margin-top: 140rpx;
  margin-bottom: 20rpx;
}
.login_box > button:nth-child(2) {
  height: 88rpx;
  width: 686rpx;
  background: #1677ff;
  border-radius: 10rpx;
  text-align: center;
  line-height: 88rpx;
  color: #ffffff;
  margin: 30rpx auto;
}
.login_box > button:nth-child(3) {
  height: 86rpx;
  width: 686rpx;
  border-radius: 10rpx;
  text-align: center;
  line-height: 86rpx;
  color: #1677ff;
  margin: 30rpx auto;
  border: 1rpx solid #1677ff;
  background-color: #fff;
}
.login_box > div:nth-child(4) {
  height: 86rpx;
  width: 686rpx;
  border-radius: 10rpx;
  text-align: center;
  line-height: 86rpx;
  color: #1677ff;
  margin: 30rpx auto;
  border: 1rpx solid #1677ff;
}
</style>
